<script setup>
import { ref, createVNode, nextTick } from 'vue';
import { ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { 
  listApi,
  deleteApi,
  runScheduleApi,
  pauseScheduleApi,
  resumeScheduleApi
} from '@/api/job/schedule.js';
import { useRequest } from '@/hooks/pages-repeat';
import { authSign } from '@/utils/tool';
import scheduleLogs from './components/schedule-logs.vue';
import scheduleAddOrUpdata from './components/schedule-add-or-updata.vue';

defineOptions({
  name: 'job-schedule'
})

const { 
  dataFormModalShowHide,
  addOrUpdataRef,
  requestInit, 
  requestObj, 
  pagination,
  rowSelection,
  getDataList,
  addOrUpdata,
  deleteData,
  modalClose,
  commonRemind,
}  = useRequest()
requestInit({
  isPage: true,
  deleteMany: true,
  listApi,
  deleteApi,
  query: {
    page: 1,
    limit: 20,
    beanName: '',
  }
})

const columns = ref([
  {
    title: 'bean名称',
    dataIndex: 'beanName',
  },
  {
    title: '参数',
    dataIndex: 'params',
  },
  {
    width: 300,
    title: 'cron表达式',
    dataIndex: 'cronExpression',
    ellipsis: true
  },
  {
    width: 300,
    title: '备注',
    dataIndex: 'remark',
    ellipsis: true
  },
  {
    width: 100,
    title: '状态',
    dataIndex: 'status',
  },
  {
    width: 160,
    title: '操作',
    dataIndex: 'operate',
    fixed: 'right'
  }
])
const operate = (id, state) => {
  let ids = id ? [id] : rowSelection.value.selectedRowKeys
  if (!ids.length) {
    return message.warning('请至少选择一条数据')
  }
  let statusText = ['暂停','执行','恢复']
  Modal.confirm({
    title: '温馨提示',
    content: `确定进行${statusText[state]}操作吗？`,
    icon: createVNode(ExclamationCircleOutlined),
    centered: true,
    okText: '确认',
    cancelText: '取消',
    onOk() {
      let requestFn = state === 0 ? pauseScheduleApi : state === 1 ? runScheduleApi : resumeScheduleApi
      requestFn(ids).then(() => {
        message.success('执行成功')
        getDataList()
      })
    }
  });
}

const scheduleLogsShowHide = ref(false)
const scheduleLogsRef = ref()
const openLogs = () => {
  scheduleLogsShowHide.value = true
  nextTick(() => {
    scheduleLogsRef.value.init()
  })
}

</script>

<template>
  <div class="container">
    <a-row :gutter="20" wrap>
      <a-col :span="4">
        <a-input v-model:value.trim="requestObj.query.beanName" allowClear placeholder="bean名称" />
      </a-col>

      <a-col :span="3">
        <a-space>
          <a-button @click="getDataList()">查询</a-button>
          <a-button v-authority="'sys:schedule:save'" type="primary" @click="addOrUpdata()">新增</a-button>
          <a-button v-authority="'sys:schedule:delete'" type="primary" danger @click="deleteData()">删除</a-button>
          <a-button v-authority="'sys:schedule:pause'" type="primary" danger @click="operate(null, 0)">暂停</a-button>
          <a-button v-authority="'sys:schedule:resume'" type="primary" danger @click="operate(null, 2)">恢复</a-button>
          <a-button v-authority="'sys:schedule:run'" type="primary" danger @click="operate(null, 1)">执行</a-button>
          <a-button v-authority="'sys:schedule:log'" type="primary" @click="openLogs">日志列表</a-button>
        </a-space>
      </a-col>
    </a-row>
    
    <a-table 
      class="table-common"
      :columns="columns" 
      :data-source="requestObj.dataList" 
      rowKey="id" 
      bordered
      :pagination="requestObj.isPage ? pagination : false"
      :loading="requestObj.dataLoading"
      :row-selection="rowSelection"
      :scroll="{ x: 1400, y: 580 }"
      @change="getDataList"
      >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex==='status'">
          <a-tag color="blue" v-if="record.status===1">正常</a-tag>
          <a-tag color="red" v-else>暂停</a-tag>
        </template>

        <template v-if="column.dataIndex==='operate'">
          <a-button type="text" >修改</a-button>

          <a-dropdown>
            <template #overlay>
              <a-menu>
                <a-menu-item 
                  key="1"
                  v-if="authSign('sys:schedule:pause')"
                  @click="operate(record.id, 0)"
                  class="btn-primary" 
                >
                  暂停
                </a-menu-item>

                <a-menu-item 
                  key="2"
                  v-if="authSign('sys:schedule:resume')"
                  @click="operate(record.id, 2)"
                  class="btn-primary" 
                >
                  恢复
                </a-menu-item>

                <a-menu-item 
                  key="3"
                  v-if="authSign('sys:schedule:run')"
                  @click="operate(record.id, 1)"
                  class="btn-primary" 
                >
                  执行
                </a-menu-item>

                <a-menu-item 
                  key="4"
                  v-if="authSign('sys:schedule:delete')"
                  @click="commonRemind(()=>{deleteData(record.id)})"
                  class="btn-delete" 
                >
                  删除
                </a-menu-item>
              </a-menu>
            </template>
            <a-button  class="btn-primary" type="text">
              更多
              <DownOutlined />
            </a-button>
          </a-dropdown>
        </template>
      </template>

      <template #emptyText>
        <a-empty :description="requestObj.emptyText" />
      </template>
    </a-table>
    <scheduleAddOrUpdata @modalClose="modalClose" ref="addOrUpdataRef" v-if="dataFormModalShowHide" />
    <scheduleLogs  @modalClose="modalClose" ref="scheduleLogsRef" v-if="scheduleLogsShowHide"/>
  </div>
</template>

<style lang="scss" scoped>

</style>